import React, { Component } from 'react';
import {
    View,
    Dimensions,
    StyleSheet,
    ScrollView,
    Alert,
    TouchableWithoutFeedback,
    TouchableHighlight,
    DeviceEventEmitter
} from 'react-native';
import { Container, Content, Button, Icon, Text, List, ListItem, Body, Spinner } from 'native-base';
import Accordion from 'react-native-collapsible/Accordion';
import Collapsible from 'react-native-collapsible';
import { connect } from 'react-redux';
import course from '../../net/course';
import URL from '../../net/url.js';
import interaction from '../../net/interaction.js';
import ChapterInfo from '../../db/coursedb/chapter_unit_table.js';
const { width, height } = Dimensions.get('window');

class study_course_information extends Component {

    static navigationOptions = ({ navigation }) => ({
        title: navigation.state.params.title,
    });
    constructor(props) {
        super(props);
        this.state = {
            selectedItem: -1,
            courseinfo: null,
            chapterTitle: null,
        }
    }
    async componentWillMount() {
        const { course_info } = this.props;

         let chapterIn = new ChapterInfo();
        try {
            await chapterIn.createChapterInfoTable();
            let info = await chapterIn.queryChapterInfo(course_info.courseid);
            if (info != null && info.length > 0) {
                console.log('chapterIn1111111111');
                let outArray = JSON.parse(info.item(0).chaptervalue);
                this.setState({ courseinfo: outArray });
                await chapterIn.closeChapterInfo();

            } else {
                console.log('chapterIn2222222222');
                let cs = new course();
                let outArray = await cs.get_course_info(course_info.courseid);
                this.setState({ courseinfo: outArray });
                chapterIn.insertChapterInfo(course_info.courseid, JSON.stringify(outArray));
                await chapterIn.closeChapterInfo();
            }
        } catch (e) {
            console.log("error", e);
        }
/*      let cs = new course();
        let resultData = await cs.get_course_info(course_info.courseid);
        this.setState({ courseinfo: resultData }); */
    }
    render_content(l) {
        const { setChapterId } = this.props;
        return l.map((v, i) => {
            return (
                <View key={i}>
                    <ListItem button style={StyleSheet.flatten(styles.menuList)}
                        onPress={() => {
                            this.setState(this.state.selectedItem != i ? { selectedItem: i } : { selectedItem: -1 });
                            this.setState({ chapterTitle: v.title });
                        }}>

                        <Body>
                            <Text style={StyleSheet.flatten(styles.textStyle)}>{v.title}</Text>
                        </Body>
                    </ListItem>

                    <Collapsible collapsed={this.state.selectedItem === i ? false : true}>
                        <List>
                            {v.moduleList.map((v, j) => {
                                return (
                                    <ListItem key={j} style={StyleSheet.flatten(styles.subList)}
                                        onPress={() => {
                                            setChapterId({
                                                type: 'GetChapterIdSuccess',
                                                payload: {
                                                    subChapterTitle: v.title,
                                                    subChapterId: v.id,
                                                    chapterTitle: this.state.chapterTitle
                                                }
                                            });
                                            //this.props.navigation.dispatch('CourseDetail');
                                            this.props.navigation.navigate('CourseDetail');

                                        }}>
                                        <Icon name='md-book' style={{ opacity: 0.5, color: '#1ae', paddingRight: 5 }} />
                                        <Body>
                                            <Text style={StyleSheet.flatten(styles.subtextStyle)}>{v.title}</Text>
                                        </Body>
                                        <Icon name="arrow-forward" style={{ opacity: 0.5, color: '#1ae' }} />
                                    </ListItem>
                                );
                            })}
                        </List>
                    </Collapsible>
                </View>
            );
        })
    }
    renderLoadingView() {
        return (
            <Container>
                <Content>
                    <Spinner color='green' />
                </Content>
            </Container>
        );
    }
    render() {
        const { navigate } = this.props.navigation;
        const { login_info_role } = this.props;
        const { course_info } = this.props;
        if (!this.state.courseinfo) {
            return this.renderLoadingView();
        }
        return (
            <Container style={StyleSheet.flatten(styles.Container)}>
                <Content >
                    <ListItem itemDivider><Text style={StyleSheet.flatten(styles.title)}>课程章节</Text></ListItem>
                    <ScrollView ref={(scrollView) => { _scrollView = scrollView; }} style={StyleSheet.flatten(styles.ScrollView)}>
                        {this.render_content(this.state.courseinfo)}
                    </ScrollView>
                </Content>
            </Container>
        );
    }
}

const styles = StyleSheet.create({

    menuList: {
        marginRight: 0,
        marginLeft: 0,
        marginTop: 1,
        paddingTop: 12,
        paddingBottom: 12,
        paddingLeft: 10,
        paddingRight: 10,
        backgroundColor: 'white',
        borderBottomWidth: 0.2,
        borderBottomColor: "#cac0c0",
    },
    subList: {
        marginRight: 0,
        marginLeft: 0,
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 30,
        paddingRight: 20,
        backgroundColor: 'white',
        borderBottomWidth: 0.2,
        borderBottomColor: "#cac0c0",
    },
    twoIcon: {
        flexDirection: 'row',
        backgroundColor: 'white',
    },
    Icon1: {
        paddingLeft: 35,
        paddingTop: 10,
        paddingRight: 20,
        paddingBottom: 10,
        alignItems: 'center',
        alignSelf: 'center',
    },
    Icon23: {
        paddingLeft: 10,
        paddingTop: 10,
        paddingBottom: 10,
        paddingRight: 20
    },
    title: {
        fontSize: 17,
        color: '#353535',
    },
    textStyle: {
        fontSize: 16,
        color: '#353535',
    },
    subtextStyle: {
        fontSize: 14,
        color: '#1ae'//'#353535',

    },
    ScrollView: {
        height: 480,
    },
    Container: {
        marginTop: 10
    }

}
);
function mapStateToProps(state) {
    return {
        course_info: state.course.course_info,
    }
}

function mapDispatchToProps(dispatch) {
    return {
        setChapterId: (state) => dispatch(state),
    }
}

const PageStudyCourseInfo = connect(
    mapStateToProps,
    mapDispatchToProps
)(study_course_information)
export default PageStudyCourseInfo;